<template>
  <div id="dialogMerge">
    <el-dialog
      title="标签帖子合并"
      :visible.sync="dialogData.isShow"
      width="360px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <!--待合并标签-->
        <dl class="top-dl">
          <dt>
            <el-form
              ref="topForm"
              :model="topForm"
              :rules="rules"
              label-width="118px"
              class="demo-ruleForm"
            >
              <el-form-item label="待合并标签ID：" prop="labelId">
                <el-input v-model.number="topForm.labelId" clearable></el-input>
                <el-button
                  type="primary"
                  @click="checkId('topForm')"
                  :loading="loading"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
            <!--<span>待合并标签ID：</span>
            <el-input clearable v-model.trim.number="labelId"></el-input>-->
          </dt>
          <dd><span>标签名称：</span>{{ formData.labelName }}</dd>
          <dd><span>标签ID：</span>{{ formData.id }}</dd>
          <dd>
            <span>标签属性：</span
            >{{ formData.labelProperty | filterName('labelPrope') }}
          </dd>
          <dd><span>包含内容数：</span>{{ formData.count }}</dd>
        </dl>
        <!--被合并标签-->
        <dl>
          <dt><span>复制帖子内容至：</span>{{ ruleForm.id }}</dt>
          <dd><span>标签名称：</span>{{ ruleForm.labelName }}</dd>
          <dd><span>标签ID：</span>{{ ruleForm.id }}</dd>
          <dd>
            <span>标签属性：</span
            >{{ ruleForm.labelProperty | filterName('labelPrope') }}
          </dd>
          <dd><span>包含内容数：</span>{{ ruleForm.count }}</dd>
        </dl>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button type="success" @click="confirmLabel('ruleForm')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getConTagsList,
  getContNum,
  mergeLable
} from '@/api/contentTags/configureTation' // 接口
export default {
  name: 'dialogMerge',
  msg: '标签配置-标签帖子合并弹窗',
  props: ['dialogData'],
  data() {
    var valiLabelId = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('标签ID必须为数字值'))
      } else {
        if (value > 0 && value <= 2147483647) {
          callback()
        } else {
          callback(new Error('标签ID取值范围错误'))
        }
      }
    }
    return {
      loading: false,
      topForm: {
        labelId: ''
      },
      formData: {
        labelProperty: '',
        count: null,
        labelName: '',
        id: ''
      },
      ruleForm: {
        labelProperty: '',
        count: 0,
        labelName: '',
        id: ''
      },
      rules: {
        labelId: [
          { required: true, message: '标签ID不能为空', trigger: 'blur' },
          { validator: valiLabelId, trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getFormData()
    this.getFormDataCount()
  },
  methods: {
    /*数据回填*/
    getFormData() {
      let { labelProperty, labelName, id } = this.dialogData.params

      this.ruleForm.labelProperty = labelProperty
      this.ruleForm.labelName = labelName
      this.ruleForm.id = id
      this.id = id
    },
    getFormDataCount() {
      /*获取包含内容数*/
      getContNum(
        this.id,
        (response) => {
          this.loading = false
          this.ruleForm.count = response
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*查询id*/
    checkId(formName) {
      // let obj = Object.assign({}, this.formInline)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = { labelId: this.topForm.labelId }
          /*查询标签信息*/
          getConTagsList(
            obj,
            (response) => {
              this.loading = false
              if (response.rows.length > 0) {
                let { labelProperty, labelName, id } = response.rows[0]
                this.formData.labelProperty = labelProperty
                this.formData.labelName = labelName
                this.formData.id = id
              } else {
                this.formData.labelProperty = ''
                this.formData.labelName = ''
                this.formData.id = ''
              }
            },
            (response) => {
              this.loading = false
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
          /*获取包含内容数*/
          getContNum(
            this.topForm.labelId,
            (response) => {
              this.loading = false
              this.formData.count = response
            },
            (response) => {
              this.loading = false
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    /*确认*/
    confirmLabel(id) {
      if (!this.formData.id) {
        this.$message.warning('无待合并标签！')
        return
      }
      this.$confirm(
        `确定要把标签ID：${this.formData.id}的${this.formData.count}条帖子复制至标签ID:${this.ruleForm.id}么？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          let sourceId = this.formData.id
          let targetId = this.ruleForm.id
          mergeLable(
            sourceId,
            targetId,
            (response) => {
              this.$message.success('操作成功')
              this.$emit('refresh')
              this.cancelLabel()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
      this.dialogData.params = {}
    }
  }
}
</script>

<style lang="less">
#dialogMerge {
  .el-form-item {
    margin-bottom: 10px !important;
  }
  dl {
    font-size: 14px;
    /*color: #0d1636;*/
    color: #606266;
    line-height: 23px;
    padding-bottom: 10px;
    &.top-dl {
      border-bottom: 1px solid #dcdfe6;
      margin-bottom: 10px;
      .el-input {
        width: 110px;
        margin-right: 10px;
        .el-input__inner {
          height: 26px;
          line-height: 26px;
        }
      }
      dt {
        margin-bottom: 0px;
      }
    }
    dd,
    dt {
      & > span {
        color: #0d1636;
      }
    }
    dt {
      margin-bottom: 10px;
    }
  }
}
</style>
